const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
    mode:"development",
    devtool:"source-map",
    entry:{
        mian:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        filename: 'js/[name].[chunkhash:8].js',
        publicPath: '/'
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                // use:['style-loader','css-loader?modules']
                use:[MiniCssExtractPlugin.loader,'css-loader?modules']
            },
            {
                test: /\.jpg$/, use:{
                    loader: 'file-loader',
                    options:{
                        name: 'img/[hash:5].[ext]'
                    }
                }
            }
        ]
    },
    devServer:{
        open:true
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/[name].[hash:5].css'
        }), // 负责生成css文件
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({teplate:"./public/index.html"}),
    ]
}